<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.mongodb.client.MongoCursor,org.bson.Document" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系部列表</title>
</head>
<body>
	<% MongoCursor<Document> departmentList = (MongoCursor<Document>)request.getAttribute("result"); %>
	<jsp:include page="../navbar.html" />
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-1 col-md-offset-9">
				<a href="addDepart.jsp">
					<button type="button" class="btn btn-default"><em class="fa fa-plus"></em> 添加</button>
				</a>
			</div>
		</div>
    	<div class="row mt15">
    		<%if(!departmentList.hasNext()) {%>
				<div class="col-md-6 col-md-offset-3">
					<div class="panel panel-default">
	                	<div class="panel-body">	                		
							<h5 class="text-center text-muted">暂无系部，快去添加吧</h5>
						</div>
					</div>
				</div>
			<%} else {%>
			<div class="col-md-8 col-md-offset-2">
				<div class="panel">
                	<div class="panel-body">
                  		<h4 class="page-header mt0">系部信息列表</h4>
                  		<table class="table table-hover table-bordered text-center">
					    	<tr class="text-center">
					      		<th width="10%">序号</th>
								<th width="15%">系部 ID</th>
								<th width="20%">系部名称</th>
								<th width="30%">系部说明</th>
								<th width="25%">操作</th>
					    	</tr>
					    	<% 
								int index = 0;
								while(departmentList.hasNext()) {
									Document document = departmentList.next();%>
									<tr>
							    	    <td><%=++index %></td>
							    		<td><%=document.getString("id") %></td>
							    		<td><%=document.getString("name") %></td>
							    		<td><%=document.getString("explain") %></td>
							    		<td>
							    			<a onclick='showDetail("<%=document.getString("id") %>","<%=document.getString("name") %>","<%=document.getString("explain") %>","<%=document.getString("remark") %>")'>
												<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="查看详情" ><em class="fa fa-file"></em></button>
											</a>
							    			<a href="updateDepart.jsp?_id=<%=document.getObjectId("_id") %>">
												<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="修改"><em class="fa fa-pencil-square-o"></em></button>
											</a>
											<a href="departmentServlet?_id=<%=document.getObjectId("_id") %>&method=delete">
												<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="删除"><em class="fa fa-trash"></em></button>
											</a>
							    		</td>
							    	</tr>	
							<% } %>
						</table>
                  	</div>
                 </div>
            </div>
            <%} %>
         </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content" style="margin-top:100px">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						系部信息
					</h4>
				</div>
				<div class="modal-body">
				 	<div style="padding: 5px 15px">					 	
				 		<p><em class="fa fa-star fontsize20 fontcolor"></em><span id="id" class="ml20 fontsize16"></span></p>
				 		<p class="mt20"><em class="fa fa-building-o fontsize20 fontcolor"></em><span id="name" class="ml20 fontsize16"></span></p>
				 		<p class="mt20"><em class="fa fa-leaf fontsize20 fontcolor"></em><span id="explain" class="ml20 fontsize16"></span></p>
				 		<P class="mt20"><em class="fa fa-bookmark fontsize20 fontcolor"></em><span id="remark" class="ml20 fontsize16"></span></P>
				 	</div>
				</div>
			</div>
		</div>
	</div>
    <script>
	    $("#myModal").modal("hide");//加载页面首先隐藏模态框，指向模态框的ID
		function showDetail(id,name,explain,remark){//a链接的参数
			$("#myModal").modal("show");//显示模态框
	
			//将a标签传递的参数获取到，并显示在模态框里
			document.getElementById('id').innerHTML = "ID： "+id;
			document.getElementById('name').innerHTML = "名称： "+name;
			document.getElementById('explain').innerHTML = "说明： "+explain;
			document.getElementById('remark').innerHTML = "备注："+remark;
		}
    	$(function () { $("[data-toggle='tooltip']").tooltip(); });
    </script>
</body>
</html>